<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <!-- 楼栋房号列表 -->
    <div class="Ban">
      <div class="Ban-title"><span>门店管理</span>
        <div class="sale-btn">
          <button @click="ban">+区域管理</button>
          <button @click="buil">+门店管理</button>
          <button @click="floor">+小组管理</button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="content">
        <el-tree
          :data="Quyu"
          show-checkbox
          node-key="id"
          :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.data.title }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
        </el-tree>
      </div>
      <!-- 表格 end-->
      <!-- 楼栋房号列表 end-->
      <!-- footer -->
      <footers></footers>
      <!-- footer end-->
      <!-- 区域管理 -->
      <div v-show="Partshow">
        <PartModal :LDmodal="opensubmit" :Refresh="getNewList" :PartClose="ban"></PartModal>
      </div>
      <!-- 区域管理 end-->
      <!-- 门店管理 -->
      <div v-show="Builshow">
        <BuilModal :LDmodal="opensubmit" :Refresh="getNewList" :Quyu="Quyu" :BuilClose="buil"></BuilModal>
      </div>
      <!-- 门店管理 end-->
      <!-- 小组管理 -->
      <div v-show="Floorshow">
        <FloorModal :LDmodal="opensubmit" :Refresh="getNewList" :Quyu="Quyu" :FloorClose="floor"></FloorModal>
      </div>
      <!-- 小组管理 end-->
      <!--提示弹窗-->
      <div v-show="submitShow">
        <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
import heads from "./head";
import footers from "./footer";
import PartModal from "./region";
import BuilModal from "./addstore";
import FloorModal from "./addgroup";
import Modal from "./modal.vue";
let id = 1000;
export default {
  name: "Store",
  components: {
    heads,
    footers,
    PartModal,
    BuilModal,
    FloorModal,
    Modal
  },
  data() {
    return {
      submitShow: false,
      message: "",
      pushTo: "",
      Partshow: false,
      Builshow: false,
      Floorshow: false,
      Quyu: [],
      QuyuID: []
    };
  },
  methods: {
    opensubmit() {
      this.message = this.$store.state.messageString;
      this.submitShow = true;
    },
    Closesubmit() {
      this.message = "";
      this.pushTo = "";
      this.submitShow = false;
    },
    // append(data) {
    //   // let pid = data.id;
    //   // this.$http.post('/index/department', {
    //   //   pid: pid
    //   // }).then(res => {
    //   //   console.log(res)
    //   //
    //   //
    //   // }).catch(err => {
    //   //   console.log(err)
    //   // });
    //
    //   const newChild = {id: id++, title: 'testtest', children: []};
    //   if (!data.children) {
    //     alert(data.id);
    //     this.$set(data, 'children', []);
    //   }
    //   data.children.push(newChild);
    //   // alert(data.id )
    // },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      let id = data.id;
      this.$http
        .delete("/index/department/" + id, {})
        .then(res => {
          console.log(res.data.msg);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 添加分区
    ban: function() {
      this.Partshow = !this.Partshow;
      this.Builshow = false;
      this.Floorshow = false;
    },
    // 添加楼栋
    buil: function() {
      this.Builshow = !this.Builshow;
      this.Partshow = false;
      this.Floorshow = false;
    },
    // 添加楼层
    floor: function() {
      this.Floorshow = !this.Floorshow;
      this.Partshow = false;
      this.Builshow = false;
    },
    getNewList() {
      let that = this;
      that.$http
        .get("/index/department/tree", {})
        .then(res => {
          let data = res.data.children;
          that.Quyu = JSON.parse(JSON.stringify(data));
          console.log(that.Quyu);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.getNewList();
  }
};
</script>
<style scoped>
.content {
  margin-top: 150px;
}
.table-left {
  width: 23%;
  float: left;
}
.table-Ban {
  width: 33.333333337%;
  float: left;
}
.table-Ban td:nth-last-child(1) {
  border-right: none;
}
.table-left td:nth-last-child(1) {
  border-right: none;
}
.deta {
  color: #415dba;
}
table {
  width: 100%;
}
.table {
  width: 100%;
  float: left;
  margin-top: 120px;
}
.tit-f {
  font-weight: bold;
}
.nav {
  margin-top: 140px;
}
.left-nav {
  width: 10%;
  top: 120px;
  float: left;
  font-size: 1em;
  text-align: center;
  background: #f9f9f9;
  height: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-right: 1px solid #d3d3d3;
}
.sale-info-title {
  background: #f9f9f9;
  overflow: hidden;
  font-weight: bold;
  border-bottom: 1px solid #d3d3d3;
}
.left-nav li {
  line-height: 45px;
}
.Ban {
  width: 100%;
  float: left;
  font-weight: bold;
}
.sale-btn button {
  margin-right: 40px;
  font-size: 1em;
  padding: 5px 10px;
  border-radius: 5px;
  background: #415dba;
  color: #fff;
  border: none;
  cursor: pointer;
}
.Ban-title span {
  float: left;
  margin-right: 30px;
}
table td {
  line-height: 30px;
  height: 30px;
}
table {
  border: 1px solid #fff;
}
.Ban-title {
  position: fixed;
  top: 80px;
  line-height: 40px;
  font-size: 1.1em;
  font-weight: bold;
  width: 94%;
  padding: 0 3%;
  float: left;
  z-index: 99;
  border-bottom: 1px solid #d3d3d3;
  background: #f9f9f9;
}
</style>
